<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="线路列表" navbarType='3'></wlk-navbar>
        <view class="line-content">
            <u-sticky>
                <view class="head-box">
                    <u-search placeholder="请输入关键词/目的地" disabled v-model="keyword" :showAction="false" @click="jump(keyword)"  :searchIconColor="themeColor" margin="0 0 30rpx 0" ></u-search>
                    <view class="wlkflex">
                        <view class="tab-item center" @click="changeOrder('default')" :style="order=='default'?'color:'+themeColor:''">默认</view>
                        <view class="tab-item center" @click="changeOrder('sales')" :style="order=='sales'?'color:'+themeColor:''">销量</view>
                        <view class="tab-item center wlkflex justify-center" @click="changeOrder('price')">
                            <view :style="order=='price'?'color:'+themeColor:''">价格</view>
                            <view class="ml05 wlkflex wrap align-content-between order">
                                <view class="wd100">
                                    <u-icon name="arrow-up" bold size="5" :color="priceOrder=='asc'?themeColor:''"></u-icon>
                                </view>
                                <view class="wd100">
                                    <u-icon name="arrow-down" bold size="5" :color="priceOrder=='desc'?themeColor:''"></u-icon>
                                </view>
                            </view>
                        </view>
                        <view class="tab-item center" :style="order=='new'?'color:'+themeColor:''" @click="changeOrder('new')">上新</view>

                    </view>
                </view>
            </u-sticky>
            <block v-if="loadStatus=='nomore' && list.length==0">
                <view class="not-data">
                    <u-empty
                            :icon="uEmpty.search"
                            text="没有搜索结果"
                    >
                    </u-empty>
                </view>
            </block>
            <block v-else>
                <wlk-line-list :list="list"></wlk-line-list>
                <view class="load-more">
                    <u-loadmore :status="loadStatus" :loading-text="loadingText"  :loadmore-text="loadmoreText" :nomore-text="nomoreText" dashed  line />
                </view>
            </block>

        </view>

    </view>
</template>

<script>
    var _self;
    import { toUrl } from '@/wlkutils/tools';
    import share from "@/wlkutils/share";
    import { mapGetters} from 'vuex';
	export default {
        computed:{
            ...mapGetters(['themeColor','uEmpty']),
        },
		data() {
			return {
                type:'',
                lineType:null,
                merchid:null,
                ids:null,
                endcityid:'',
                keyword:'',
                list:[],
                page: 1,
                loadStatus:'loading',
                loadingText: '努力加载中',
                loadmoreText: '轻轻上拉',
                nomoreText: '实在没有了',
                order:'default', //default 综合 sales 销量 price 价格 new 上新
                priceOrder:'' //价格排序 asc desc

			};
		},
		onLoad(options) {
		    _self = this;
		    if(options.endcityid){
                _self.endcityid = options.endcityid
                _self.type = 'end'
            }else if(options.keyword){
                _self.keyword = options.keyword
                _self.type = 'hotWord';
            }else if(options.lineType){
                _self.type = 'lineType';
                _self.lineType = options.lineType;
            }else if(options.merchid){
                _self.type = 'merchid';
                _self.merchid = options.merchid;
            }
            this.ids = this.$Route.query.ids??null;

            this.loadStatus = 'loading';
            this.page = 1;
            this.list = [];
            this.getData();

        },
		onShow() {

		},
        onShareAppMessage(res){
            return share.setShareInfo();
        },
        onReachBottom() {
            if(this.loadStatus == "nomore"){
                return;
            }
            this.page++;
            this.getData();
        },
		methods: {
            changeOrder(v){
                if(v=='price'){
                    if(uni.$u.test.isEmpty(this.priceOrder)){
                        this.priceOrder = 'asc';
                    }else {
                        this.priceOrder = this.priceOrder == 'asc'?'desc':'asc';
                    }
                }else{
                    this.priceOrder = '';
                }
                if(this.order != v || v=='price'){
                    this.order = v;
                    this.page = 1;
                    this.loadStatus = 'loading';
                    this.list = [];
                    this.getData();
                }
            },
            async getData() {
                
                console.log('getdata')
                
                const res = await uni.$u.http.post("line/getList", {
                    endcityid: this.endcityid,
                    keyword: this.keyword,
                    type: this.type,
                    lineType: this.lineType,
                    merchid: this.merchid,
                    ids: this.ids,
                    page: this.page,
                    order: this.order,
                    priceOrder: this.priceOrder,
                });
                if (res && res.data && res.data.rows) {
                    this.list = this.list.concat(res.data.rows);
                }
                this.loadStatus = res.data.rows.length < res.data.limit ? 'nomore' : 'loadmore';
            },
            jump(index){
                toUrl('/pages/line/search?keyword='+index);
            },
		},
	};
</script>

<style lang="scss">
    .line-content {
        .head-box{
            background-color: #FFFFFF;
            padding: 30rpx 30rpx 20rpx 30rpx;
            .tab-item{
                width: 33.33%;
                font-size: $font-lt;
                .order{
                    height: 25rpx;
                    width: 24rpx;
                }
            }
        }
    }
</style>
